<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>轮播图列表</title>

    <link th:href="@{../layui/css/layui.css}" rel="stylesheet"/>
    <style>
        .box{
            width:500px;
            height:40px;
            border:2px solid #006EFF;
            margin:auto;
        }
        .input{
            float:left;
            width:400px;/*宽400*/
            height:38px;/*高38（因为文本框内外边框要占用1像素所以总体高度减2，其他盒子同理）*/
            outline:none;
            border:none;/*取消文本框内外边框*/
        }
        .button{
            cursor: pointer;
            float:left;
            width:100px;
            height:40px;
            color:white;
            background-color:#006EFF;/*将按钮背景设置为红色，字体设置为白*/
            border:none;
            outline:none;/*取消边框和外边框将按钮边框去掉*/
        }
    </style>
</head>
<body>

<div class="layui-carousel" id="test1">
    <div carousel-item>
        <div>图片1</div>
        <div>图片2</div>
        <div>图片3</div>
        <div>图片4</div>
        <div>图片5</div>
    </div>
</div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>轮播图列表</legend>
</fieldset>





<div class="box">
    <form>
        <input type="text" class="input" placeholder="请输入轮播图名称">
        <!--placeholder是文本框中的提示文字-->
        <input type="submit" value="搜索" class="button">
    </form>
</div>



<a href="/banner/toBannerAdd"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon" ></i></button></a>



<div class="layui-form">
    <table class="layui-table">
        <colgroup>
            <col width="150">
            <col width="150">
            <col width="200">
            <col width="500">
            <col>
        </colgroup>
        <thead>
        <tr>
            <th>轮播图ID</th>
            <th>图片</th>
            <th>是否显示</th>
            <th>线路名称</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="ban: ${Pager.getList()}">
            <td th:text="${ban.banId}"></td>
            <td>
                <img th:src="'/uploads/'+${ban.banSrc}">
            </td>
            <td th:text="${ban.isShow==0?'显示':'隐藏'}"></td>
            <td th:text="${ban.title}"></td>
            <td>

                <a th:href="@{/banner/toBannerEdit(banId=${ban.banId})}"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button></a>
                <a th:href="@{/banner/deleteBanner(banId=${ban.banId})}"><button type="button" class="layui-btn layui-btn-sm"><i class="layui-icon"></i></button></a>
            </td>
        </tr>
        </tbody>
    </table>
    <div>
        <!-- 分页导航 -->
        <nav style="float: left;">
            <ul class="pagination">
                <li>
                    <a th:href="@{/banner/toBannerList(routeId=${routeId},current=${Pager.currentPage -1 &gt; 0 ? Pager.currentPage -1 : 1})}">
                        <span aria-hidden="true">上一页</span>
                    </a>
                </li>
                <ul th:with="size=${Pager.totalPage}">
                    <li th:each="index: ${#numbers.sequence(1,size)}">
                        <a th:href="@{/banner/toBannerList(routeId=${routeId},current=${index})}" th:text="${index}"></a>
                    </li>
                </ul>
                <li>
                    <a th:href="@{/banner/toBannerList(routeId=${routeId},current=${Pager.currentPage +1 &gt; Pager.totalPage ? Pager.totalPage : Pager.currentPage+1})}">
                        <span aria-hidden="true">下一页</span>
                    </a>
                </li>
            </ul>
        </nav>
        <div style="float: right;margin-top: 25px;">
            <span>共<span th:text="${Pager.total}"></span>条记录，分<span th:text="${Pager.totalPage}"></span>页显示</span>
        </div>
    </div>
</div>



<script th:src="@{/layui/layui.js}"></script>
<script>
    layui.use('carousel', function(){
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            ,width: '100%' //设置容器宽度
            ,arrow: 'always' //始终显示箭头
            //,anim: 'updown' //切换动画方式
        });
    });
</script>
</body>
</html>